<template>
  <div id="map" style="width:100%;height:100%"></div>
</template>

<script>
// 要使用腾讯地图相关插件, 须引入该js进行初始化
import { lazyTMapApiLoaderInstance } from '@/components/MyMap/util/TMapInit'
let center;
export default {
  name: "MyTMap",
  props: {
    showCenter: {
      type: Array,
      default: () => [113.66357, 23.213887]
    },
    zoom: {
      type: Number,
      default: 10
    },
    viewMode: {
      type: String,
      default: "3D"
    },
    /** 地图俯视角度, 仅在设置了3D模式时生效 */
    pitch: {
      type: Number,
      default: 60
    },
    infoMapPosition: {
      type: Array,
      default: () => [113.66357, 23.213887]
    }
  },
  created() {
  },
  computed: {
    arriveHere() {
      return `//uri.amap.com/marker?position=${this.infoMapPosition[0]},${this.infoMapPosition[1]}&name=${this.companyName}`
    }
  },
  data() {
    return {
      companyName: "索菲亚家居股份有限公司",
      tMap: null,
      /** 是否显示缩放控件 */
      toolbarVisible: true,
      /** 是否显示控制罗盘 */
      controlbarVisible: false,
      /** 是否显示比例尺 */
      scaleVisible: true,
      infoWindowVisible: false
    }
  },
  watch: {
    scaleVisible(val) {
      if (val) {
        this.tMap.addControl(this.tMap.getControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE))
      } else {
        this.tMap.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE)
      }
    },
    toolbarVisible(val) {
      if (val) {
        this.tMap.addControl(this.tMap.getControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM))
      } else {
        this.tMap.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM)
      }
    },
    controlbarVisible(val) {
      if (val) {
        let control = this.tMap.getControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
        this.tMap.addControl(control)
        control.setPosition(TMap.constants.CONTROL_POSITION.TOP_RIGHT);
      } else {
        this.tMap.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION)
      }
    },
  },
  mounted() {
    let that = this;
    that.initMap();
  },
  methods: {
    initMap() {
      let that = this;
      lazyTMapApiLoaderInstance.then(() => {
        center = new TMap.LatLng(this.infoMapPosition[1], this.infoMapPosition[0]);
        that.createDefaultMap();
        that.createInfoLayer();
        that.createMarkerLayer();
      })
    },
    createDefaultMap() {
      if (this.tMap == null) {
        this.tMap = new TMap.Map("map", {
          center: new TMap.LatLng(this.infoMapPosition[1], this.infoMapPosition[0]), //设置地图中心点坐标
          pitch: this.pitch,
          zoom: this.zoom, //设置地图缩放级别
          viewMode: this.viewMode,
        });
        // 默认不显示旋转控件
        this.tMap.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION)
      }
    },
    createMarkerLayer() {
      let that = this;
      let markerLayer = new TMap.MultiMarker({
        // 指定地图容器
        map: that.tMap,
        // 样式定义
        styles: {
          // 创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
          "myStyle": new TMap.MarkerStyle({
            // 点标记样式宽度（像素）
            "width": 25,
            // 点标记样式高度（像素）
            "height": 35,
            // 焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
            "anchor": { x: 16, y: 32 }
          })
        },
        // 点标记数据数组
        geometries: [{
          // 点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
          "id": "1",
          // 指定样式id
          "styleId": 'myStyle',
          // 点标记坐标位置
          "position": center,
          // 自定义属性
          "properties": {
            "title": "索菲亚家居股份有限公司"
          }
        }]
      });
      markerLayer.on('click', () => {
        if (that.infoWindowVisible) {
          that.infoWindow.close();
        } else {
          that.infoWindow.open();
        }
        that.infoWindowVisible = !that.infoWindowVisible;
      })
    },
    createInfoLayer() {
      let that = this;
      this.infoWindow = new TMap.InfoWindow({
        map: that.tMap,
        position: center,
        offset: {x: 0,y: -20},
        content: `<div style='text-align: left'>
                        <b>${this.companyName}</b>
                        <br>
                        <p>地址：广州市增城区郭村仙宁路2号</p>
                        <p><a href='${this.arriveHere}' target='_blank' class='el-link el-link--primary is-underline'><span class='el-link--inner'>到这里去→</span></a></p>
                    </div>`
      });
      this.infoWindow.on('closeclick', () => {
        that.infoWindowVisible = false;
      })
      this.infoWindow.close();
      this.infoWindowVisible = false;
    }
  }
}
</script>

<style scoped>
.map-header-drag-input-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  width: 7.3rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
  position: fixed;
  top: 0.2rem;
  left: 0.2rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
  opacity: 0.9;
  z-index: 1001;
}
</style>
@/components/MyMap/util/TMapInit